<template>
  <div id="password-view" class="stepper">
    <div class="upper">
      <div class="title">设置登录密码</div>
    </div>
    <div class="desc">
      您可以使用新设置的密码在平安到家APP、小程序和公众号登录您
      <a>{{this.securePhone}}</a>账号
    </div>
    <div class="input-field">
      <md-field class="phone-input">
        <md-field-item>
          <md-input-item
            name="password"
            data-vv-name="密码"
            ref="passwordInput"
            v-model="password"
            v-validate="'required|loginPassword'"
            placeholder="输入6-12位密码"
            :maxlength="12"
            :type="showPassword?'text':'password'"
            size="large"
          >
            <md-icon :name="showPassword?'yincang_icon':'xianshi_icon'" slot="right" @click="showPassword=!showPassword"></md-icon>
          </md-input-item>
        </md-field-item>
      </md-field>
    </div>
    <div class="sub-input">密码为6～12位数字及字母的组合，区分大小写</div>
    <md-button @click="login" :disabled="password===''">确定</md-button>
  </div>
</template>
<script>
import '@/assets/svgs/snyc_nav_fh.svg';
import '@/assets/svgs/xianshi_icon.svg';
import '@/assets/svgs/yincang_icon.svg';
import { Field, InputItem, FieldItem, Button, Toast, Icon, Dialog } from 'mand-mobile';
import { LOGIN } from '@/store/actions.types';
import { GPS_UNKNOWN, GPS_LOCATING, GPS_SUCCESS, GPS_ERROR } from '@/store/gps.types';
import { mapGetters } from 'vuex';
export default {
  name: 'set-password-view',
  components: {
    [InputItem.name]: InputItem,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog
  },
  created() {
    if (this.$route.query.phone) {
      this.$store.commit('setCurrentPhone', this.$route.query.phone);
    }
    this.$store.commit('setLoginMode', 'password');
  },
  data() {
    return {
      password: '',
      showPassword: false
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    login() {
      this.$validator.validateAll().then(res => {
        if (this.errors.has('密码')) {
          Toast({
            content: this.errors.all()[0],
            duration: 2000
          });
          return;
        } else {
          let params = {
            type: '2',
            user_phone: this.currentPhone,
            user_pwd: this.password
          };
          if (this.getOpenId) {
            params.openId = this.getOpenId;
          }
          if (this.getUnionId) {
            params.unionid = this.getUnionId;
          }
          if (this.getPlatformId) {
            params.app_id = this.getPlatformId;
          }
          if (this.getOpenId) {
            params.open_id = this.getOpenId;
          }
          if (this.gpsStatus === GPS_SUCCESS) {
            params.coordinate = this.getCurrentLocation.coordinate.join(',');
          }
          this.$store
            .dispatch('getLoginByPwd', params)
            .then(() => {
              this.$router.replace({
                name: 'Home'
              });
            })
            .catch(reason => {
              this.password = '';
            });
        }
      });
    }
  },
  computed: {
    ...mapGetters(['currentPhone', 'currentCaptcha', 'getOpenId', 'getUnionId', 'getPlatformId', 'getCurrentLocation']),
    securePhone() {
      return this.currentPhone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
    }
  }
};
</script>
<style lang="stylus">
#password-view {
  padding: 40px;

  a {
    color: color-primary;
  }

  .upper {
    margin-top: 62px;
  }

  .desc {
    margin-bottom: 80px !important;
  }

  .input-field {
    margin-bottom: 20px;
    border-bottom: 1px solid #E0E0E0;

    .left {
      margin-left: 0px !important;
    }

    .md-field-item-inner {
      padding: 0 0;
    }

    .md-field-item {
      padding: 0 0;
    }

    .md-input-item {
      padding: 0 0;

      ::-moz-placeholder {
        color: color-text-caption;
      }

      ::-webkit-input-placeholder {
        color: color-text-caption;
      }

      :-ms-input-placeholder {
        color: color-text-caption;
      }
    }
  }

  .sub-input {
    font-size: 24px;
    font-weight: 500;
    color: rgba(153, 153, 153, 1);
    line-height: 24px;
    margin-bottom: 58px;
  }
}
</style>